<template>
  <tinymce-vue v-model="contentHtml" tag-name="div" :init="settings"></tinymce-vue>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import TinymceVue from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import "tinymce/icons/default"; // 引用图标文件
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/advlist";
import "tinymce/plugins/anchor";
import "tinymce/plugins/autolink"; //锚点
import "tinymce/plugins/autoresize";
import "tinymce/plugins/autosave";
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //查看源码
import "tinymce/plugins/codesample"; //插入代码
import "tinymce/plugins/directionality"; //
import "tinymce/plugins/fullpage"; //页面属性编辑
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //横线
import "tinymce/plugins/image"; //图片
import "tinymce/plugins/imagetools"; //图片工具
import "tinymce/plugins/importcss"; //图片工具
import "tinymce/plugins/insertdatetime"; //时间插入
import "tinymce/plugins/media"; //媒体插入
import "tinymce/plugins/nonbreaking"; //
import "tinymce/plugins/noneditable"; //不间断空格
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/paste"; //粘贴
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快捷菜单
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/spellchecker"; //拼写检查
import "tinymce/plugins/tabfocus"; //
import "tinymce/plugins/template"; //插入模板
import "tinymce/plugins/textpattern"; //
import "tinymce/plugins/toc"; //
import "tinymce/plugins/visualblocks"; //
import "tinymce/plugins/visualchars"; //
import "tinymce/plugins/wordcount"; //数字统计

import * as FileAPI from '@/api/file.js'

export default {
  props: {
    content: String,
  },
  components: {
    TinymceVue,
  },
  data() {
    return {
      contentHtml: this.content,
      updateTimer: null, //防抖
      settings: {
        selector: '#myTextarea',
        language_url: '/tinymce/langs/zh_CN.js', //语言包的路径
        language: 'zh_CN', //语言
        skin_url: '/tinymce/skins/ui/oxide', //skin路径
        content_css: "/tinymce/content.css",
        // height: 200, //编辑器高度
        branding: false, //是否禁用“Powered by TinyMCE”
        menubar: false, //顶部菜单栏显示
        elementpath: false,
        resize: false, // 禁止改变大小
        statusbar: false, // 隐藏底部状态栏
        toolbar_mode: "none",
        // 根据需要选用，插件需要import进来
        plugins: "code image media table hr link lists advlist",
        //"wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save
        //quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss
        //imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor
        //autolink autoresize autosave", // 插件需要import进来

        // 根据需要选用
        toolbar: "code | undo redo | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table hr | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        //toolbar: "undo redo fontsizeselect fontselect | outdent indent aligncenter alignleft alignright alignjustify lists advlist | link image hr   ",
        //paste print
        //fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc
        //spellchecker searchreplace|save preview pagebreak nonbreakings
        //|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help

        // 字体
        fontsize_formats: "10px 12px 14px 16px 18px 24px 36px 48px 56px 72px",
        font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",

        // 自定义图片上传处理
        images_upload_handler: (blobInfo, success) => {
          let file = blobInfo.blob();//转化为易于理解的file象
          let formData = new FormData();
          formData.append("file", file);
          formData.append("dir", "tinymce");
          FileAPI.uploadFile(formData).then(result => {
            success(this.$fullUrl(result.data.url));
          });
        },
      },
    }
  },

  methods: {
  },

  watch: {
    content(valueFromParent) {
      // 由父组件自动修改的内容,同步到子组件
      if (valueFromParent !== this.contentHtml) {
        this.contentHtml = valueFromParent;
      }
    },
    contentHtml(valueFromChild = "") {
      // 向父组件派发change事件
      if (valueFromChild !== this.content) {
        this.updateTimer && clearTimeout(this.updateTimer);
        this.updateTimer = setTimeout(() => {
          this.$emit("update:content", valueFromChild);
        }, 500);
      }
    },
  },

  beforeDestroy() {
    this.updateTimer && clearTimeout(this.updateTimer);
  },
};
</script>
